<%--
  Created by IntelliJ IDEA.
  User: student
  Date: 2019/10/4
  Time: 17:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basepath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <base href="<%=basepath %>"/>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <style>
        body {
            padding: 10px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div><h1>APP信息管理维护  | 测试账户</h1></div>
<div style="margin: 30px">

    <div   style="display: inline-block;margin: 10px"> 软件名称: <input  style="height: 30px;width: 200px " id="name" name="name" type="text" autocomplete="off" /></div>
    <div   style="display: inline-block;margin: 10px"> 所属平台:  <select style="height: 30px; width: 200px;" id="zhuang"  name="interest" lay-filter="aihao">
        <option value="0"></option>
    </select></div>

    <div   style="display: inline-block;margin: 10px"> 一级分类:  <select style="height: 30px; width: 200px;" id="yi" name="interest" lay-filter="aihao">
        <option value="0"></option>
    </select></div>
    <br/>


    <div   style="display: inline-block;margin: 10px"> 二级分类:  <select style="height: 30px; width: 200px;" id="er" name="interest" lay-filter="aihao">
        <option value="0"></option>
    </select></div>

    <div   style="display: inline-block;margin: 10px"> 三级分类:  <select style="height: 30px; width: 200px;" id="san" name="interest" lay-filter="aihao">
        <option value="0"></option>
    </select></div>

    <button class="layui-btn" id="su" data-type="reload">搜索</button>
</div>

APP列

<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-xs" lay-event="edit">审核</a>

</script>

<script src="static/js/jquery.min.js"></script>
<script src="static/ruoyi/ry-ui.js"></script>
<script src="static/layui/layui.all.js"></script>
<script src="static/validate/jquery.validate.min.js"></script>
<script src="static/validate/messages_zh.min.js"></script>
<script src="static/validate/jquery.validate.extend.js"></script>
<script>

    $(".shangjia").click(function(){
        window.alert("我回来啦");
    });
    $.ajax({url:"xia/zhuang",success:function(result){
            var arr = result;
            $("#zhuang").empty();
            var str = "";
            str +="<option value='0'>请选择</option>"
            for (var i = 0; i < arr.length; i++) {
                str += "<option value='"+arr[i].id +"'>"+ arr[i].valuename+"</option>";
            }
            $("#zhuang").append($(str));

        }});


    $.ajax({url:"xia/one",success:function(result){
            var arr = result;
            $("#yi").empty();
            var str = "";
            str +="<option value='0'>请选择</option>"
            for (var i = 0; i < arr.length; i++) {
                str += "<option value='"+arr[i].id +"'>"+ arr[i].categoryname+"</option>";
            }
            $("#yi").append($(str));

        }});

$("#yi").change(function(){
    var yi=$("#yi").val();
    if(yi==0){
        $("#er").empty();
        $("#san").empty();
    }else{
        $.ajax({url:"xia/two",
            data:{two: yi},
            success:function(result){
                var arr = result;
                $("#er").empty();
                var str = "";
                str +="<option value='0'>请选择</option>"
                for (var i = 0; i < arr.length; i++) {
                    str += "<option value='"+arr[i].id +"'>"+ arr[i].categoryname+"</option>";
                }
                $("#er").append($(str));

            }});
    }
});

    $("#er").change(function(){
        var yi=$("#er").val();
        if(yi==0){

            $("#san").empty();
        }else{
            $.ajax({url:"xia/three",
                data:{three: yi},
                success:function(result){
                    var arr = result;
                    $("#san").empty();
                    var str = "";
                    str +="<option value='0'>请选择</option>"
                    for (var i = 0; i < arr.length; i++) {
                        str += "<option value='"+arr[i].id +"'>"+ arr[i].categoryname+"</option>";
                    }
                    $("#san").append($(str));

                }});
        }
    });


    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: 'backend/list' //数据接口
            ,cols: [[ //表头

        {field: 'id', title: 'id',width: 30},
                {field: 'softwarename', title: '软件名字',width: 110}
                ,{field: 'apkname', title: 'APK名字', width: 100}
                ,{field: 'fei1', title: '所属平台' ,width: 85}
                ,{field: 'softwaresize', title: '软件大小(M)',width: 85}

                ,{field: 'fei5', title: "所属分类",width: 250, templet: function(d){
                        return  "全部>"+d.fei5+">"+d.fei3+">"+d.fei4  }}
                ,{field: 'fei2', title: '状态' ,width: 110}
                ,{field: 'downloads', title: '下载次数' ,width: 80,}
                ,{field: 'versionname', title: '最新版本号' ,width: 90}
                ,{field: 'chao', title: '操作' ,width: 150,toolbar: '#barDemo'}
                /*,{field: 'grade.gname', title: '年级', templet: function(d){
                        return d.grade.gname
                    }}*/

            ]],
            parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            ,id: 'testReload'
            ,page: true
        });



        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
           if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                var da=data.id;
               layer.open({
                   type: 2,
                   title: "审核信息",
                   closeBtn: 1, //不显示关闭按钮
                   shade: [0],

                   area: ['700px', '600px'],
                   shadeClose: true, //点击遮罩关闭层
                   btn: [ '关闭'],
                   anim: 2,
                   content: ['ver/tocha1/'+da, 'off']//iframe的url，no代表不显示滚动条

               });
            }
        });

        /*数据*/
            var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                         name: $('#name').val(),
                        zhuang: $("#zhuang").val(),
                        ping: $("#ping").val(),
                        one: $("#yi").val(),
                        two: $("#er").val(),
                        three: $("#san").val(),
                    }
                }, 'data');
            }
        };

        $('#su').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });


    /* 下拉数据操作*/

    /*   弹层*/



</script>
</body>
</html>
